<!--  -->
<template>
  <el-card>
    <div slot="header" class="header">
      <div class="category-header">
        <span>销售额类别对比</span>
        <el-radio-group v-model="value" size="small">
          <el-radio-button label="全部渠道" @click.native="hanlder('all')" />
          <el-radio-button label="线上" @click.native="hanlder('online')" />
          <el-radio-button label="门店" @click.native="hanlder('shop')" />
        </el-radio-group>
      </div>
    </div>
    <div ref="charts" class="charts" />
  </el-card>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    rank: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      value: '全部渠道'
    }
  },
  computed: {
    onlineRank: function() {
      const onlineRank = []
      this.rank.online.name.map((item, index) => {
        const temp_rank = { name: '', value: '' }
        temp_rank.name = item
        temp_rank.value = this.rank.online.value[index]
        onlineRank.push(temp_rank)
      })
      return onlineRank
    },
    shopRank: function() {
      const shopRank = []
      this.rank.shop.name.map((item, index) => {
        const temp_rank = { name: '', value: '' }
        temp_rank.name = item
        temp_rank.value = this.rank.shop.value[index]
        shopRank.push(temp_rank)
      })
      return shopRank
    },
    ranks: function() {
      const ranks = []
      this.shopRank.map((item, index) => {
        const temp_rank = { name: '', value: '' }
        temp_rank.name = item.name
        temp_rank.value = item.value + this.onlineRank[index].value
        ranks.push(temp_rank)
      })
      return ranks
    }
  },
  watch: {
    rank: function(newRank, oldRank) {
      this.initChart(this.ranks)
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart(ranks = []) {
      const mychart = echarts.init(this.$refs.charts)
      mychart.setOption({
        title: {
          text: '搜索引擎',
          subtext: 1048,
          left: 'center',
          top: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '销售额类别对比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              formatter: `{b}\n{d}%`,
              show: true,
              position: 'outsize'
            },
            labelLine: {
              show: true
            },
            color: ['yellowgreen', 'skyblue', 'pink', 'lightgreen', 'cyan', 'purple', 'orange'],
            data: ranks
          }
        ]
      })
      mychart.on('mouseover', (params) => {
        const { name, value } = params.data
        mychart.setOption({
          title: {
            text: name,
            subtext: value
          }
        })
      })
    },
    hanlder(channel) {
      if (channel === 'all') {
        this.initChart(this.ranks)
      } else if (channel === 'online') {
        this.initChart(this.onlineRank)
      } else {
        this.initChart(this.shopRank)
      }
    }
  }
}
</script>

<style  scoped>
.header {
  border-bottom: 1px solid lightgray;
}
.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
}
.charts {
  width: 100%;
  height: 300px;
}
</style>
